$(function () {
	let myCharts = echarts.init(document.getElementById('cityMap'));
	//存储切换的每一级地图信息
	var mapStack = [];
	var timeFn = null;
	var curMap = {};
	var lastPoints = [];
	var currentMapcode = '';
	var series = [];
	/**
   加载地图：根据地图所在省市的行政编号，
   获取对应的json地图数据，然后向echarts注册该区域的地图
   最后加载地图信息
   @params {String} mapCode:地图行政编号,for example['中国':'100000', '湖南': '430000']
   @params {String} mapName: 地图名称
*/
	var convertData = function (data) { // 处理数据函数
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var geoCoord = data[i].coord;
			if (geoCoord) {
				res.push({
					name: data[i].name,
					value: geoCoord.concat(data[i].value),
					num: data[i].num,
					flag: data[i].flag
				});
			}
		}
		return res;
	};
	var fconvertData = function (data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataItem = data[i];
			var fromCoord = geoCoordMap[dataItem[0].name];
			var toCoord = geoCoordMap[dataItem[1].name];
			if (fromCoord && toCoord) {
				res.push({
					fromName: dataItem[0].name,
					toName: dataItem[1].name,
					coords: [fromCoord, toCoord],
					value: dataItem[1].value
				});
			}
		}
		return res;
	};
	loadMap('trainmap', 'mmap')
	/**
   绑定双击事件，并加载上一级地图
*/
	myCharts.on('dblclick', function (params) {
		//当双击事件发生时，清除单击事件，仅响应双击事件
		clearTimeout(timeFn);
		var map = mapStack.pop();
		if (!mapStack.length && !map) {
			// alert('已经到达最上一级地图了');
			return;
		}
		loadMap(map.mapCode, map.mapName);
	});
	myCharts.on('click', function (params) {
		clearTimeout(timeFn);
		//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行
		timeFn = setTimeout(function () {
			if (params.data && params.data.flag) {
				window.location.href = '/detail/'+params.data.name
				// window.location.href = './assets/' + params.data.name + '.xlsx'
			} else {
				var name = params.name;
				var mapCode = cityMap[name];
				if (!mapCode) {
					// alert('暂无' + name + '更详细的地图!');
					return;
				}
				if (currentMapcode != mapCode) {
					//当前浏览的地图不是下一个要看的
					loadMap(mapCode, name);
					//将上一级地图信息压入mapStack
					mapStack.push({
						mapCode: curMap.mapCode,
						mapName: curMap.mapName
					});
				}
			}

		}, 250);
	});


	function loadSeries(arr) {
		var color = ['#a6c84c', '#633363', '#ef500c','#fab27b'];
		series.splice(0, series.length)
		arr.forEach(function (item, i) {
			if (i != 0) {
				series.push({
					name: item[0] + ' ',
					type: 'lines',
					zlevel: 1,
					effect: {
						show: true,
						period: 6,
						trailLength: 0.7,
						color: '#fff',
						symbolSize: 6
					},
					lineStyle: {
						normal: {
							color: color[i],
							width: 0,
							curveness: 0.2
						}
					},
					data: fconvertData(item[1])
				}, {
					name: item[0] + '',
					type: 'lines',
					zlevel: 3,
					symbol: ['circle', 'circle'],
					symbolSize: 6,
					effect: {
						show: true,
						period: 6,
						trailLength: 0,
						symbol: 'image:///assets/train.png',
						symbolSize: 15
					},
					lineStyle: {
						normal: {
							color: color[i],
							width: 2,
							type:'dashed',
							opacity: 0.6,
							curveness: 0.2
						}
					},
					data: fconvertData(item[1])
				}, {
					name: item[0] + '',
					type: 'scatter',
					coordinateSystem: 'geo',
					zlevel: 2,
					rippleEffect: {
						brushType: 'stroke'
					},
					label: {
						normal: {
							show: true,
							position: 'right',
							formatter: '{b}'
						}
					},
					symbolSize: function (val) {
						return 6;
					},
					itemStyle: {
						normal: {
							color: color[i]
						}
					},
					data: item[1].map(function (dataItem) {
						return {
							name: dataItem[1].name,
							value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
						};
					})
				});

			} else {
				series.push({ // 散点配置
					name: '探测站',
					type: 'effectScatter',
					coordinateSystem: 'geo',
					data: convertData(item),
					symbolSize: 12,
					showEffectOn: 'emphasis',
					rippleEffect: {
						brushType: 'stroke'
					},
					zlevel: 3,
					hoverAnimation: true,
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: true
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: '#ff8003'
						}
					}
				});
			}
		});
	}

	function loadMap(mapCode, mapName) {
		var option = {}; // echarts 配置
		var temparr = [];
		temparr.splice(0, temparr.length);
		currentMapcode = mapCode;
		lastPoints = markPointData[mapCode] ? markPointData[mapCode] : lastPoints
		//添加标记点
		temparr.push(lastPoints);
		//添加铁路线路
		temparr=temparr.concat(flyLinesData[mapCode] ? flyLinesData[mapCode] : [['',[]]]);
		// temparr.push(['上海', SHData]);
		loadSeries(temparr)
		$.get('/json/' + mapCode + '.json', function (data) {
			if (data) {
				echarts.registerMap(mapCode, data);
				option = { // echarts 配置
					backgroundColor: '#fff',
					title: {
						text: '科佳设备分布图',
						subtext: '2019年7月18日',
						// sublink: 'http://www.pm25.in',
						left: 'center',
						textStyle: {
							color: '#666666'
						}
					},
					tooltip: {
						trigger: 'item',
						formatter: function (params) {
							if (params.seriesType == "effectScatter") {
								return '<span>' + params.data.name + '</span><p class="conut-next">目录1&nbsp;&nbsp;' + params.data.runConut + '台</p><p class="conut-next">类别&nbsp;&nbsp;' + params.data.num + '台</p>'
								//return "线路："+params.data.name+""+params.data.value[2];
							} else if (params.seriesType == "lines") {
								return  params.seriesName+"<br />" +params.data.fromName + "至" + params.data.toName;
							} else {
								return params.name;
							}

							//return '<a target="_blank" class="params-name" href="detail.html?label='+params.data.name+'">' + params.data.name + '</a><p class="conut-next">管理干部培训&nbsp;&nbsp;' + params.data.runConut + '人</p><p class="conut-next">卓越教师培训&nbsp;&nbsp;' + params.data.num + '人</p>'
						},
						enterable: true, //鼠标是否可进入提示框
						transitionDuration: 3, //提示框移动动画过渡时间
						backgroundColor: '#fffeee',
						borderWidth: '1px',
						borderRadius: '5',
						borderColor: 'rgba(72,150,128,1)',
						textStyle: {
							color: 'rgba(94,194,222,1)'
						},
						padding: 22,
						showDelay: 0,
						transitionDuration: 0
					},

					visualMap: {
						min: 1,
						max: 4,
						calculable: true,
						inRange: {
							color: ['#9B30FF', '#666333', '#000000','#5c7a29']
						},
						textStyle: {
							color: '#fff'
						},
						seriesIndex:0, 
						show: false
					},
					geo: { // 地图配置
						// type: 'map',
						//地图名称
						map: mapCode,
						label: {
							normal: {
								formatter: function (params) {
									var res = "";
									if (params.name) {
										res = params.name + (stationInfo[params.name] ? '\n设备总数：' + stationInfo[params.name].count : '') + '\n{lc|}'
									} else {

									}
									return res;
								},
								position: 'inside',
								show: true,
								rich: {
									lc: {
										backgroundColor: {
											image: '/assets/location.png'
										}
									},
									la: {
										fontsize: '8px',
										color: '#ffffff',
									}
								}
							},
							emphasis: {
								show: false
							},
						},
						roam: true, //谷歌有兼容问题 在火狐好使
						itemStyle: {
							normal: {
								areaColor: '#fff',
								borderColor: '#3B5077'
							},
							emphasis: {
								areaColor: '#ffffff'
							}
						},
						zoom: 1.2,
						// regions:[{                                  //在地图中对特定的区域配置样式。
						// 	name: '哈尔滨局',
						// 	itemStyle: {
						// 		normal: {
						// 			areaColor: '#ffddee',
						// 			color: 'red'
						// 		}
						// 	}
						// }]

					},
					series: series
					//[
					// 	{
					// 		name:  ' Top10',
					// 		type: 'lines',
					// 		zlevel: 1,
					// 		effect: {
					// 			show: true,
					// 			period: 6,
					// 			trailLength: 0.7,
					// 			color: '#fff666',
					// 			symbolSize: 3
					// 		},
					// 		lineStyle: {
					// 			normal: {
					// 				color: color[0],
					// 				width: 0,
					// 				curveness: 0.2
					// 			}
					// 		},
					// 		data: fconvertData(flyLinesData[mapCode]?flyLinesData[mapCode]:[])
					// 	},
					// 	{
					// 		name: ' Top10',
					// 		type: 'lines',
					// 		zlevel: 2,
					// 		symbol: ['none', 'circle'],
					// 		symbolSize: 10,
					// 		effect: {
					// 			show: true,
					// 			period: 6,
					// 			trailLength: 0,
					// 			symbol: 'image://./assets/train.png',
					// 			symbolSize: 22
					// 		},
					// 		lineStyle: {
					// 			normal: {
					// 				color: color[0],
					// 				width: 2,
					// 				opacity: 0.6,
					// 				curveness: 0.2
					// 			}
					// 		},
					// 		data: fconvertData(flyLinesData[mapCode]?flyLinesData[mapCode]:[])
					// 	},
					// 	{ // 散点配置
					// 	name: '探测站',
					// 	type: 'effectScatter',
					// 	coordinateSystem: 'geo',
					// 	data: convertData(lastPoints),
					// 	symbolSize: 12,
					// 	showEffectOn: 'emphasis',
					// 	rippleEffect: {
					// 		brushType: 'stroke'
					// 	},
					// 	zlevel: 2,
					// 	hoverAnimation: true,
					// 	label: {
					// 		normal: {
					// 			formatter: '{b}',
					// 			position: 'right',
					// 			show: true
					// 		},
					// 		emphasis: {
					// 			show: true
					// 		}
					// 	},
					// 	itemStyle: {
					// 		normal: {
					// 			color: '#ff8003'
					// 		}
					// 	}
					// }]
				};
				myCharts.clear();
				console.log(option);
				myCharts.setOption(option);
				curMap = {
					mapCode: mapCode,
					mapName: mapName
				};
			}
		})
	}


});